// View: theme upload
.theme-upload__dropzone {
	position: relative;
	background-color: $gray-light;
	border: 2px dashed $gray;
	transition: all 200ms ease-out, color 100ms ease-out;
	cursor: pointer;

	svg * {
		transition: color 100ms ease-out;
	}

	.file-picker {
		color: $gray-dark;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 180px;
	}

	&:hover {
		border-color: $gray-dark;
		transform: translate3d( 0, -1px, 0 );
		box-shadow: 0 2px 4px lighten( $gray, 20% );

		.theme-upload__dropzone-icon {
			color: $gray-dark;
		}
	}
}

.theme-upload__dropzone-icon {
	color: $gray;
}

.theme-upload__dropzone-instructions {
	font-style: italic;
	font-size: 12px;
}


.theme-upload {
	&.is-disabled {
		opacity: 0.2;
		pointer-events: none;
	}
}


// View : theme successfully uploaded
.theme-upload__theme-sheet {
	font-size: 14px;
}

.theme-upload__theme-name {
	font-size: 24px;
	font-weight: 600;
	clear: none;
}

.theme-upload__screenshot {
	float: right;
	width: 300px;
	border: 1px solid lighten( $gray, 30% );
	margin-left: 24px;

	@include breakpoint( "<960px" ) {
		float: none;
		margin-left: 0;
		margin-bottom: 24px;
	}
}

.theme-upload__description {
	margin: 24px 0;
}

.theme-upload__action-buttons {
	clear: both;
	overflow: hidden;
	border-top: 1px solid lighten( $gray, 30% );
	padding: 16px;
	margin: 24px -24px -24px;

	.button {
		margin: 0 20px 0 0;
	}
}
